<template>
	<view style="margin-top: 60px; display: flex; flex-direction: column;">
		<h1 style="margin-left: 20px;">房屋新增</h1>
		<view class="input_view">
			房屋标题: <input v-model="form.subject" class="input" placeholder="请输入房屋标题"/>
		</view>
		<view class="input_view">
			房屋封面: <button class="btn_cls" @click="uploaderImg()">上传图片</button>  
			<img v-if="fengmian" :src="fengmian" style="width: 150px; height: 100px; margin-left: 20px;"/>
		</view>
		<view class="input_view">
			房屋类型: 
			<select class="select" v-model="form.type">
				<option value="">--请选择--</option>
				<option value="1">民房</option>
				<option value="2">公寓</option>
				<option value="3">商品房</option>
			</select>
		</view>
		<view class="input_view">
			房屋户型: 
			<select class="select" v-model="form.shi">
				<option value="">--几室--</option>
				<option value="1">一室</option>
				<option value="2">二室</option>
				<option value="3">三室</option>
				<option value="4">四室及以上</option>
			</select>
			<select class="select" v-model="form.ting">
				<option value="">--几厅--</option>
				<option value="1">一厅</option>
				<option value="2">二厅</option>
				<option value="3">三厅及以上</option>
			</select>
		</view>
		<view class="input_view">
			房屋价格: <input type="number" class="input" placeholder="请输入房屋价格" v-model="form.price"/>
		</view>
		<view class="input_view">
			房屋地址: <input class="input" style="width: 50%;" placeholder="请输入房屋地址" v-model="form.address"/>
		</view>
		<view class="input_view">
			房屋经度: <input class="input" placeholder="经度" v-model="form.lng"/>
		</view>
		<view class="input_view">
			房屋纬度: <input class="input" placeholder="纬度" v-model="form.lat"/>
		</view>
		
		<view class="input_view">
			<view style="background-color: aquamarine;
				height: 500px; width: 70%;">
				<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" scroll-wheel-zoom="true"
					@click="clickMap">
					
					<bm-marker :position="point" :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
					</bm-marker>
					
				</baidu-map>
			</view>
		</view>
		
		<view class="input_view" style="align-items: flex-start;">
			房屋描述: <textarea class="input" style="width: 50%; height: 300px;"
				placeholder="请输入房屋的详细描述" v-model="form.info"></textarea>
		</view>
		
		<view class="input_view" style="align-items: flex-start;">
			<button class="btn_cls" @click="addHouse()">提交</button>
		</view>
	</view>
</template>

<!--
 GPS坐标系 
 火星坐标系
 百度坐标系
 -->
<script>
	export default {
		data() {
			return {
				fengmian: null,
				center: "北京",
				zoom: 15,
				point: {
					lng: 0, 
					lat: 0
				},
				form: {
					lat: "",
					lng: "",
					image: "",
					subject: "",
					type: "",
					shi: "",
					ting: "",
					price: "",
					address: "",
					info: ""
				}
			}
		},
		methods: {
			handler ({BMap, map}) {
			  console.log(BMap, map)
			  // this.center.lng = 116.404
			  // this.center.lat = 39.915
			  this.zoom = 15
			},
			clickMap(e) {
				this.form.lat = e.point.lat;
				this.form.lng = e.point.lng;
				this.point = e.point;
				console.log("点击了地图:", this.point);
			},
			//上传图片
			uploaderImg(){
				uni.chooseImage({
					count: 1, //默认9
					success: (res) => {
						//上传图片
						const tempFilePaths = res.tempFilePaths;
						uni.uploadFile({
							url: this.$.baseUrl + '/file/uploader', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								//JSON.parse 表示将JSON字符串转换成JSON对象
								var r = JSON.parse(uploadFileRes.data);
								console.log(r);
								//获取上传后的文件名称
								this.form.image = r.data;
								
								//头像回显
								this.fengmian = this.$.getImg(this.form.image);
							}
						});
					}
				});
			},
			addHouse(){
				this.$.ajax({
					type: "POST",
					url: "/house/insert",
					data: this.form,
					success: (result) => {
						
					}
				});
			}
		}
	}
</script>

<style>
	.bm-view {
		width: 100%;
		height: 100%;
	}
	
	.input_view {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 20px;
	}
	
	.input {
		margin-left:  20px;
		padding: 10px 20px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 10px;
	}
	
	.select {
		margin-left: 20px;
		padding: 10px 20px;
	}
	
	.btn_cls {
		width: 15%;
		background-color: #19b18b;
		color: white;
		box-shadow: 10rpx 10rpx 10rpx gray;
		margin: 0px;
		margin-left:  20px;
	}
	
	button:active{
		position: relative;
		top: 5rpx;
		left: 5rpx;
		box-shadow: 5rpx 5rpx 10rpx gray;
	}
</style>
